<template>
    <div class="news-item-container">
   <div class="flex">
    <div 
        style=" height:30px;border-radius: 6px;padding: 5px 10px;color: white;font-size: 14px;background-color: #dc6b14;margin-right: 10px;">
        {{ getNewsTypeText(data.classReal) }}</div>
    <div class="font-extrabold mb-[1.5vh]" @click="showDetail = true; console.log(data)">{{ data.newsTitle }}</div>
   </div>
    <div class="mb-[1.5vh]">{{ data.abstractReal }}</div>
    <div class="flex mb-[1.5vh] leading-[16px]">
        <span>{{ data.siteName }}·由{{ data.opPerson }}更新</span>
        <span class="ml-[1vw] text-[#999]">{{ data.createTime }}</span>
        <span class="flex-1 text-right mr-[1vw] text-[#999]">{{ data.pubTime ? '已发布' : '未发布' }}</span>
        <div @click="$emit('removeData', data.id)">
            <span class="text-[#3D87CF] mr-[0.5vw] text-[16px]">-</span>
            <span class="text-[#3D87CF] mr-[0.5vw]" >移除</span>
        </div>
        <div v-if="!data.isSelect && !data.pubTime" @click="$emit('addData', data.id)" >
            <span class="text-[#3D87CF] mr-[0.5vw] text-[16px]">+</span>
            <span class="text-[#3D87CF] mr-[0.5vw]">加入待发布</span>
        </div>
        <el-icon class="text-[#3D87CF] mt-[0.30vh] mr-[0.5vw]" @click="showEditor = true">
            <EditPen />
        </el-icon>
        <span class="text-[#3D87CF]" @click="showEditor = true ;console.log(data) ;emits('edit', data)">编辑</span>
    </div>
    </div>
    <Editor v-model="showEditor" :data="data" />
    <Detail v-model="showDetail" :newsData="data" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Editor from './Editor.vue'
import Detail from './Detail.vue'
import { useUserinfo } from '@/stores/userinfo'

const {scope} = useUserinfo()
const emits= defineEmits(['removeData', 'addData','edit','click'])
// 控制组件显示状态
const showEditor = ref(false)
const showDetail = ref(false)

defineProps(['data'])
 
onMounted(()=>{
console.log(scope)
})
// 新闻类型映射
const newsTypeMap = {
  1: '宏观形势',
  2: '行业动态',
  3: '产业链动态',
  4: '国际能源观察',
  5: '其他'
}

// 获取新闻类型显示文本
const getNewsTypeText = (type) => {
  return newsTypeMap[type] || type
}
</script>

<style scoped>
.news-item-container {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  word-wrap: break-word;
  word-break: break-all;
}
</style>